<template>
  <div>
    <!-- 文章列表 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="header-class">文章列表</span>
        <!-- <el-button style="float: right" type="primary" size="small">添加分类</el-button> -->
      </div>
      <div>
        <el-form :inline="true" ref="allForm" class="demo-form-inline">
          <!-- 文章分类 -->
          <el-form-item label="文章分类" prop="form.cate_name">
            <el-select v-model="form.cate_name" placeholder="请选择分类">
              <el-option
                v-for="(item, index) in changeClass"
                :key="index"
                :label="item.cate_name"
                :value="item.cate_name">
               </el-option>
            </el-select>
          </el-form-item>
          <!-- 发布状态 -->
          <el-form-item label="发布状态" prop="form.state">
            <el-select v-model="form.state" placeholder="请选择状态">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
             type="primary"
             style="background-color: #EAECF5; color: #0052D9"
             @click="reset('form')"
             >重置</el-button>
          </el-form-item>
          <!-- 发布文章按钮 -->
            <!-- @click="goPublish" -->
          <el-button style="float: right" type="primary" size="small"
            @click="dialogVisible = true"
            >发表文章</el-button>
        </el-form>
        <!-- 弹出 发布文章 弹框 -->
        <el-dialog
          title="发表文章"
          style="margin-left: 200px;"
          :visible.sync="dialogVisible"
          width="95%"
          :before-close="handleClose">
          <PublishArticle></PublishArticle>
          <span slot="footer" class="dialog-footer">
          </span>
        </el-dialog>
      </div>
      <el-table border style="width: 100%;" :data="list" >
        <el-table-column prop="name" width="400" label="文章标题"></el-table-column>
        <!-- <el-table-column prop="date" label="序号" width="180"></el-table-column> -->
        <el-table-column prop="name"  label="分类" width="135"></el-table-column>
        <el-table-column prop="address" label="发表时间" width="215"></el-table-column>
        <el-table-column prop="address" label="状态" width="215"></el-table-column>
        <el-table-column prop="address" label="操作"  width="215">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              style="margin-left: 35px;"
              @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
         <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagenum"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
    </el-card>

  </div>
</template>

<script>
import { getArticleList, getArticleClass } from '@/api/user'
import PublishArticle from '@/views/article/publish'
export default {
  name: 'ListArticle',
  components: {
    PublishArticle
  },
  data () {
    return {
      list: [],
      dialogVisible: false, // 弹出 发表文章 弹框
      changeClass: [],
      form: {
        cate_name: '', // 请选择分类选择
        state: '' // 发布状态选择
      },
      cate_alias: '',
      pagesize: 10, // 当前页面需要的数据条数
      pagenum: 1, // 当前页码数
      currentRow: null // 当前行
    }
  },
  async created () {
    this.initData()
  },
  methods: {
    // 初始化页面
    async initData () {
      // 获取文章列表
      await getArticleList({
        pagesize: this.pagesize,
        pagenum: this.pagenum
      })
      // console.log(res)
      // 获取文章分类
      const data = await getArticleClass({
        cate_name: this.form.cate_name,
        cate_alias: this.form.cate_alias
      })
      this.changeClass = data.data
      // console.log(data.data)
    },
    // 关闭 文章发布 弹框方法
    handleClose (done) {
      this.$confirm('确认关闭发布文章吗？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 重置表单
    reset (formName) {
      this.$refs[formName].resetFields()
    },
    // 编辑行
    handleEdit (index, row) {
      console.log(index, row)
    },
    // 删除行
    handleDelete (index, row) {
      console.log(index, row)
    },
    // 分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    // 跳转当前页
    handleCurrentChange (val) {
      console.log(val)
      // 更新当前页
      this.pagenum = val
      // 根据当前页 渲染数据
      this.initData()
    }
    // 跳转到发表文章页面
    // goPublish () {
    //   this.$router.push('/publish')
    // }
  }
}
</script>

<style lang="less" scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
// 整个卡片
.box-card {
  margin: 20px;
  // 操作左上角文字
  .header-class {
    line-height: 32px;
    font-size: 16px;
  }
  .block{
    margin-top: 30px;
    margin-bottom: 10px;

  }
}
</style>
